<template><!-- 可以把列表项放入template标签中，然后进行批量渲染  -->
  <div class="mod-config"><!-- 块级标签,class类名用于标识和选择元素的样式 -->
     <!--el-form表单 由输入框、选择器、单选框、多选框等组件组成
    inline指组件是否同行显示，model用于保存表单的数据对象，单向绑定数据对象
    “:” 是指令 “v-bind”的缩写，跟一个属性绑定，可以动态的获取数据，引号里面是JS代码
          “@”是指令“v-on”的缩写，监听用户的点击, 拖拽, 键盘等事件
       @keyup.enter.native="按钮绑定的事件名"，用于监听当用户释放Enter键按键时，则会调用`""`里的方法 -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <!-- el-form-item 用来展示表单项标签, 一个el-form-item中可以有多个输入框-->
      <el-form-item>
         <!--el-input 为受控组件输入框,v-model双向绑定dataForm.paramKey这个属性 placeholder="参数名"是输入框占位文本， clearable为清空按钮-->
        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
         <!--el-button 常用的操作按钮。 @click="search()"用户点击查询search()-->
        <el-button @click="search()">查询</el-button>
        <!-- v-if="isAuth('sys:config:save')"判断当前登录的用户，它所有的权限中，有没有括号内填写的权限标识，有的话返回true，没有的话返回false,
           type是主要类型按钮 , @click="addOrUpdateHandle()"监听用户点击新增这个事件执行addOrUpdateHandle()-->
        <el-button v-if="isAuth('sys:config:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <!-- v-if="isAuth('sys:config:delete')"判断当前登录的用户，它所有的权限数组中，有没有括号内填写的权限标识，有的话返回true，没有的话返回false,
           type是危险类型按钮 , @click="deleteHandle()"用户点击删除执行deleteHandle()，:disabled表示禁用状态，"dataListSelections.length <= 0判断是否为真，为真则禁用-->
        <el-button v-if="isAuth('sys:config:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
     <!-- table用于展示多条结构类似的数据表格，可对数据进行排序、筛选、或其他自定义操作。 -->
      <!-- data是显示的数据,在 Table 中每一个(小格子) 里面显示的数据都是从动态绑定的对象数组中拿到的数据 ,border是否带有纵向边框表格，, v-loading加载数据时显示动态效果。
      @selection-change当多选框选择项发生变化时会触发该事件,
      style可以设置元素样式,width设置列的宽度-->
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- el-table-column表示表格的一列  type如果设置了selection 则显示多选框；
    header-align表头对齐方式， align表格内容的对齐方式,width设置列的宽度-->
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
       <!-- prop 对应列内容的字段名,用prop属性来对应对象中的键名即可填入数据, header-align表头对齐方式, align表格内容对齐方式,用label属性来定义表格的列名,width设置列的宽度-->
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="80"
        label="ID">
      </el-table-column>
      <!-- prop 对应列内容的字段名,用prop属性来对应对象中的键名即可填入数据, header-align表头对齐方式, align表格内容对齐方式,用label属性来定义表格的列名-->
      <el-table-column
        prop="paramKey"
        header-align="center"
        align="center"
        label="参数名">
      </el-table-column>
      <!-- prop 对应列内容的字段名,用prop属性来对应对象中的键名即可填入数据, header-align表头对齐方式, align表格内容对齐方式,用label属性来定义表格的列名-->
      <el-table-column
        prop="paramValue"
        header-align="center"
        align="center"
        label="参数值">
      </el-table-column>
      <!-- prop 对应列内容的字段名,用prop属性来对应对象中的键名即可填入数据, header-align表头对齐方式, align表格内容对齐方式,用label属性来定义表格的列名-->
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
        <!--  fixed 列是否固定在左侧或者右侧(left/right，true 表示固定在左侧), header-align表头对齐方式, align表格内容对齐方式,用label属性来定义表格的列名,width设置列的宽度  -->
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <!--slot-scope="scope"本质上就是一个插槽，简单说就是先占一个位置，然后再等待操作往里面填值即可  -->
        <template slot-scope="scope">
           <!-- v-if="isAuth('sys:config:update')"判断当前登录的用户，它所有的权限数组中，有没有括号内填写的权限标识，有的话返回true，没有的话返回false,
           type="text"文本类型, size尺寸, @click="addOrUpdateHandle(scope.row.id)"用户点击删除执行addOrUpdateHandle(scope.row.id)， scope.row.id是选择的一整行数据对应的id-->
          <el-button v-if="isAuth('sys:config:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
           <!-- v-if="isAuth('sys:config:delete')"判断当前登录的用户，它所有的权限数组中，有没有括号内填写的权限标识，有的话返回true，没有的话返回false,
           type="text"text类型, size尺寸, @click="deleteHandle(scope.row.id)"用户点击删除执行deleteHandle(scope.row.id)， scope.row.id是选择的一整行数据对应的id-->
          <el-button v-if="isAuth('sys:config:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!-- el-pagination当数据量过多时，使用分页组件，@size-change监听每页条数的变化，@current-change监听当前页的变化，
     :current-page单项绑定当前页页码:page-sizes绑定每页条数的数组，这里的数组是用于每页条数的切换选择 提供 pageSize 的切换，:page-size单向绑定每页条数
     :total单项绑定总条数，layout组件布局，子组件名用逗号分隔，每个值代表页面上展示的功能组件 布局结构-->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
          <!--add-or-update 引入的 增加或者修改的组件  v-if返回的结果是一个boolean类型，其作用是这个页面的组件能否成功的显示
    ref 是起的组件名称，引用标识
    @refreshDataList监听触发这个自定义事件，调用getDataList方法
    -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<!-- JS代码脚本，用于在 HTML 页面中嵌入 js代码 -->
<script>
  import AddOrUpdate from './config-add-or-update'//使用import ...from..来引入组件
 
// export声明页面所需要用到的变量、全局变量、方法等
  export default {
    data () {//管理初始化全局变量
      return {//用return返回初始数据的一个全新数据对象。
        dataForm: {//数据对象
          paramKey: ''//设定的主键值
        },
        dataList: [],//定义数据列表
        pageIndex: 1,//当前页码
        pageSize: 10,//每页条数
        totalPage: 0,//设置总页数
        dataListLoading: false,//加载动态效果不显示
        dataListSelections: [],//勾选的数据列表
        addOrUpdateVisible: false//这个页面的组件设为不显示
      }
    },
    components: {// components 声明引入组件
      AddOrUpdate
    },
    activated () {//activated()函数是一个在页面被激活时执行的钩子函数（一个实例从创建到销毁的过程系统自动执行的函数），适用组件缓存场景
      this.getDataList()// 获取数据列表
    },
    methods: {// methods 编写js方法函数
      // 查询
      search() {
        this.pageIndex = 1//设置页码
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        console.log(1111);//调用console中的log方法来在在网页日志中输出
        
        this.dataListLoading = true//设置加载状态
        this.$http({//发送HTTP请求，发送get请求来获取数据列表，并在请求成功时处理响应
          //this.$http.adornUrl()和this.$http.adornParams()是拦截器中拦截的函数，可以对url和params进行处理
          url: this.$http.adornUrl('/sys/config/list'),//发送请求的路径
          method: 'get',//方式为GET请求
          params: this.$http.adornParams({//是用来传递查询参数的部分，是封装操作
            'page': this.pageIndex,//当前页码
            'limit': this.pageSize,//每页条数
            'paramKey': this.dataForm.paramKey//dataForm的主键值
          })
          // then(({data}) => { 里的data是指接口成功返回的数据
        }).then(({data}) => {
          if (data && data.code === 0) {//判断date是否为真值，并且data.code 是否严格等于0，都为真就执行里面的语句
            this.dataList = data.page.list//给dataList赋值
            this.totalPage = data.page.totalCount//给totalPage赋值
          } else {
            this.dataList = []//给data.page.list赋值
            this.totalPage = 0//把totalPage赋值为0
          }
          this.dataListLoading = false//设置加载状态
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val//给pageSize赋值
        this.pageIndex = 1//把1赋值给pageIndex
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val//给pageIndex赋值
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val//给 dataListSelections赋值
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true//addOrUpdate的可视化为true
        this.$nextTick(() => {//是钩子函数，当组件显示后并数据发生变化，系统自动执行该函数
          this.$refs.addOrUpdate.init(id)//用于初始化添加或更新表单，传入的参数是id，
        })
      },
      // 删除
      deleteHandle (id) {//根据id删除
        var ids = id ? [id] : this.dataListSelections.map(item => {//判断id存不存在
          return item.id//返回勾选的id
        })
         //$confirm方法显示一个确认对话框 对话框的内容通过模板字符串构建，join()方法将数组转换成字符串
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {//根据用户的选择发送删除请求到服务器，并处理响应结果
          confirmButtonText: '确定',//是确认按钮的名称
          cancelButtonText: '取消',//是取消按钮的名称 
          type: 'warning'//是弹窗的消息类型
        }).then(() => {//.then 点击确定删除后执行下面内容
          this.$http({//发送HTTP请求，通过发送post请求来获取数据列表，并在请求成功时处理响应
             //this.$http.adornUrl()是拦截器中拦截的函数，可以对url进行处理
            url: this.$http.adornUrl('/sys/config/delete'),//发送请求的路径
            method: 'post',//方式为POST请求
            data: this.$http.adornData(ids, false)

            // then(({data}) => { 里的data是指接口成功返回的数据
          }).then(({data}) => {//.then 点击确定后成功删除后执行下面内容
            if (data && data.code === 0) {//判断date是否为真值，并且data.code 是否严格等于0，都为真就执行里面的语句
              this.$message({//消息提示弹窗
                message: '操作成功',//消息文字
                type: 'success',//主题类型
                duration: 1500,//显示时间, 毫秒。设为 0 则不会自动关闭
                onClose: () => {//关闭时的回调函数, 参数为被关闭的 message 实例
                  this.getDataList()// 获取数据列表
                }
              })
            } else {//不符合条件执行
              this.$message.error(data.msg)//用于显示一条显示错误的提示信息
            }
          })
        }).catch(() => {})//当出现删除提示信息弹窗后，点击取消后执行
      }
    }
  }
</script>
